<template>
  <div id="allmap">
    <div id="map"></div>
    <!-- 地图图标显示选择器 -->
    <!-- <div class="person_top">
      <p>
        <span>
          <input id="checkbox_car" type="checkbox" checked />
        </span>
        <span style="font-size: 12px;">车辆</span>
      </p>
      <p>
        <span>
          <input id="checkbox_clc" type="checkbox" checked @click="handleCheckCLC" />
        </span>
        <span style="font-size: 12px;">处理厂</span>
      </p>
      <p>
        <span>
          <input id="checkbox_zzz" type="checkbox" @click="handleCheckZZZ" />
        </span>
        <span style="font-size: 12px;">中转站</span>
      </p>
      <p>
        <span>
          <input id="checkbox_large" type="checkbox" @click="handleCheckLarge" />
        </span>
        <span style="font-size: 12px;">大中型餐饮单位</span>
      </p>
      <p>
        <span>
          <input id="checkbox_small" type="checkbox" @click="handleCheckSmall" />
        </span>
        <span style="font-size: 12px;">沿街小型商铺</span>
      </p>
      <p>
        <span>
          <input id="checkbox_village" type="checkbox" @click="handleCheckVillage" />
        </span>
        <span style="font-size: 12px;">小区厨余垃圾点</span>
      </p>
      <p>
        <span>
          <input id="checkbox_carLabel" type="checkbox" checked @change="showPoint" />
        </span>
        <span style="font-size: 12px;">车辆标签</span>
      </p>
    </div> -->

    <!-- 左侧面板 -->
    <!-- <div class="map-infos-wrap"> -->
    <!-- <div class="map-infos" v-if="showMapInfo"> -->
    <!-- 第一个面板 -->
    <!-- <div v-if="mapInfoTabValue === 0"> 
          <h3>职员汇总<i>393人</i></h3>
          <div class="item-wrap">
            <div class="item-con">
              <h2>351</h2>
              <span>在线</span>
            </div>
            <div class="item-con">
              <h2>42</h2>
              <span>离线</span>
            </div>
          </div>
          <h3>出勤状态<i>393人</i></h3>
          <div class="item-wrap">
            <div class="item-con">
              <h2>341</h2>
              <span>出勤</span>
            </div>
            <div class="item-con">
              <h2>52</h2>
              <span>未出勤</span>
            </div>
          </div>
          <h3>人员分类</h3>
          <el-table
            :data="peopleData"
            class="card-table"
            style="width: 100%"
            size="mini"
            border
            fit
          >
            <el-table-column prop="role" label="角色"></el-table-column>
            <el-table-column prop="total" label="总数" width="60"></el-table-column>
            <el-table-column prop="attendance" label="出勤" width="60"></el-table-column>
            <el-table-column prop="noAttendance" label="未出勤" width="70"></el-table-column>
          </el-table>
        </div>-->
    <!-- 第二个面板 -->
    <!-- <div v-if="mapInfoTabValue === 1">
          <h3>车辆汇总<i>55辆</i></h3>
          <div class="item-wrap">
            <div class="item-con">
              <h2>32</h2>
              <span>在线</span>
            </div>
            <div class="item-con">
              <h2>23</h2>
              <span>离线</span>
            </div>
          </div>
          <h3>出勤状态<i>55辆</i></h3>
          <div class="item-wrap">
            <div class="item-con">
              <h2>12</h2>
              <span>出勤</span>
            </div>
            <div class="item-con">
              <h2>43</h2>
              <span>未出勤</span>
            </div>
          </div>
          <h3>车辆分类</h3>
          <el-table
            :data="peopleData"
            class="card-table"
            style="width: 100%"
            size="mini"
            border
            fit
          >
            <el-table-column prop="role" label="角色"></el-table-column>
            <el-table-column prop="total" label="总数" width="60"></el-table-column>
            <el-table-column prop="attendance" label="出勤" width="60"></el-table-column>
            <el-table-column prop="noAttendance" label="未出勤" width="70"></el-table-column>
          </el-table>
        </div> -->
    <!-- 第三个面板 -->
    <!-- <div v-if="mapInfoTabValue === 2">
          <h3>设施汇总<i>466个</i></h3>
          <div class="icon-wrap">
            <div class="icon-con" v-for="(item,index) in iconInfos" :class="{'hasColor': item.num}" :key="index">
              <i :class="item.icon"></i>
              <el-tag
                effect="dark"
                size="mini">
                {{ item.num }}
              </el-tag>
              <span>{{item.name}}</span>
            </div>
          </div>
        </div> -->
    <!-- 第四个面板 -->
    <!-- <div v-if="mapInfoTabValue === 3">
          <h3>事件汇总<i>32件</i></h3>
          <div class="item-wrap">
            <div class="item-con">
              <h2>26</h2>
              <span>未处理</span>
            </div>
            <div class="item-con">
              <h2>1</h2>
              <span>处理中</span>
            </div>
            <div class="item-con">
              <h2>5</h2>
              <span>已结案</span>
            </div>
          </div>
          <h3>事件分类<i>2类</i></h3>
          <schart class="schart" canvasId="pie" :options="pieOptions"></schart>
          <h3>事件来源<i>4个</i></h3>
          <el-table
            :data="eventData"
            class="card-table"
            style="width: 100%"
            size="mini"
            border
            fit
          >
            <el-table-column prop="name" label="事件" width="100"></el-table-column>
            <el-table-column prop="percent" label="占比">
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.percent" color="#007ACC" :show-text="false"></el-progress>
              </template>
            </el-table-column>
            <el-table-column prop="num" label="数量" width="70"></el-table-column>
          </el-table>
        </div> -->
    <!-- 第五个面板 -->
    <!-- <div v-if="mapInfoTabValue === 4">
          <h3>图标选择器</h3>
          <div class="map-checkboxs">
            <p>
              <el-checkbox v-model="checkbox_large" @change="handleCheckLarge">大中型餐饮单位</el-checkbox>
            </p>
            <p>
              <el-checkbox v-model="checkbox_small" @change="handleCheckSmall">沿街小型商铺</el-checkbox>
            </p>
            <p>
              <el-checkbox v-model="checkbox_village" @change="handleCheckVillage">小区厨余垃圾点</el-checkbox>
            </p>
            <p>
              <el-checkbox v-model="checkbox_carLabel" @change="showPoint">车辆标签</el-checkbox>
            </p>
          </div>
        </div> -->
    <!-- </div> -->
    <!-- 面板切换选项卡 -->
    <!-- <div class="info-tabs">
        <a v-for="(item,index) in mapInfoTabs" :class="{'active': mapInfoTabValue === index}" :key="index" @click="changeMapInfoTabValue(index)">
          <i :class="item.icon"></i>
        </a>
      </div> -->
    <!-- </div> -->

    <!-- 图例 -->
    <div class="person_legend" v-if="showLegend">
      <h3>
        图例
        <i class="iconfont icon-shanchu" @click="showLegend = false"></i>
      </h3>
      <!-- <h3>垃圾点图例</h3> -->
      <p>
        <span>
          <img :src="legend.largeOverlay" alt />
        </span>
        <span style="font-size: 12px">大中型餐饮单位</span>
      </p>
      <p>
        <span>
          <img :src="legend.smallOverlay" alt />
        </span>
        <span style="font-size: 12px">沿街小型商铺</span>
      </p>
      <p>
        <span>
          <img :src="legend.villageOverlay" alt />
        </span>
        <span style="font-size: 12px">小区厨余垃圾点</span>
      </p>
      <p>
        <span>
          <img :src="legend.clcOverlay" alt />
        </span>
        <span style="font-size: 12px">处理厂</span>
      </p>
      <p>
        <span>
          <img :src="legend.large" alt />
        </span>
        <span style="font-size: 12px">大中型餐饮单位</span>
      </p>
      <p>
        <span>
          <img :src="legend.small" alt />
        </span>
        <span style="font-size: 12px">沿街小型商铺</span>
      </p>
      <p>
        <span>
          <img :src="legend.village" alt />
        </span>
        <span style="font-size: 12px">小区</span>
      </p>
      <!-- <p>
        <span>
          <img :src="legend.zzzOverlay" alt />
        </span>
        <span style="font-size: 12px;">中转站</span>
      </p> -->
    </div>

    <!-- 右上方显示隐藏图标操作栏,单选 -->
    <!-- <div class="map-operation">
      <ul>
        <li v-for="(item,index) in mapOperationsList" :class="{'active': operationValue === index}" :key="index" @click="changeOperationValue(item, index)">
          <i :class="item.icon"></i>
          {{ item.name }}
        </li>
      </ul>
    </div> -->
    <!-- 右上方显示隐藏图标操作栏,多选 -->
    <div class="map-operation">
      <ul>
        <li
          v-for="(item, index) in mapOperationsList"
          :class="{ active: item.active }"
          :key="index"
          @click="changeOperationValue(item, index)"
        >
          <i :class="item.icon"></i>
          {{ item.name }}
        </li>
      </ul>
    </div>
    <!-- <div class="person_legend">
      <h3>车辆图例</h3>
      <p>
        <span>
          <img :src="legend.large" alt />
        </span>
        <span style="font-size: 12px;">大中型餐饮单位</span>
      </p>
      <p>
        <span>
          <img :src="legend.small" alt />
        </span>
        <span style="font-size: 12px;">沿街小型商铺</span>
      </p>
      <p>
        <span>
          <img :src="legend.village" alt />
        </span>
        <span style="font-size: 12px;">小区</span>
      </p>
    </div> -->
    <!-- 状态图例 -->
    <!-- <div class="status_legend">
      <span>状态</span>
      <span class="public online"></span>
      <span>在线({{status.onlines}})</span>
      <span class="public outline"></span>
      <span>离线({{status.outlines}})</span>
      <span class="public warning"></span>
      <span>报警({{warningNum}})</span>
    </div>-->
    <!-- 左下角 列表展开按钮-->
    <div class="mini_legend" v-if="hideFooter" @click="showFooter()">
      车辆实时监控列表
    </div>
    <!-- 右下角 图例展开按钮-->
    <div
      class="mini_legend right"
      v-if="!showLegend"
      @click="showLegend = !showLegend"
    >
      图例
    </div>

    <!-- 右键列表菜单 -->
    <div
      class="row_box"
      v-if="MouseEvent.isShow"
      :style="`left: ${MouseEvent.left}px; top: ${MouseEvent.top}px;`"
    >
      <span @click="goMoreCarVideo">视频</span>
    </div>
  </div>
</template>

<script>
import imgMarkerCLC from '@/assets/marker/markerImageCLC.png'
import imgMarkerLarge from '@/assets/marker/markerImageLarge.png'
import imgMarkerSmall from '@/assets/marker/markerImageSmall.png'
import imgMarkerVillage from '@/assets/marker/markerImageVillage.png'
import imgMarkerZZZ from '@/assets/marker/markerImageZZZ.png'
import imageMarkerCarL from '@/assets/marker/carLarge.png'
import imageMarkerCarS from '@/assets/marker/carSmall.png'
import imageMarkerCarV from '@/assets/marker/carVillage.png'
import warningMark from '@/assets/warning-mark.png'
import eventBus from '@/eventBus.js'
import MapStr from '@/main.js'
import Schart from 'vue-schart';
export default {
  components: {
    Schart
  },
  data () {
    return {
      MouseEvent: {
        top: 0,
        left: 0,
        isShow: false
      },
      map: null,
      mapZoom: 15,
      // 班组区域
      groupPolygon: null,
      cleanerPolygon: null,
      // status: {},
      legend: {
        villageOverlay: imgMarkerVillage,
        largeOverlay: imgMarkerLarge,
        smallOverlay: imgMarkerSmall,
        clcOverlay: imgMarkerCLC,
        zzzOverlay: imgMarkerZZZ,
        village: imageMarkerCarV,
        large: imageMarkerCarL,
        small: imageMarkerCarS,
      },
      MapOverlay: {
        warningMarker: '',
        arrayCarMapOverlay: [],
        arrayCLCMapOverlay: [],
        arrayZZZMapOverlay: [],
        arraySmallMapOverlay: [],
        arrayLargeMapOverlay: [],
        arrayVillageMapOverlay: []
      },
      Data: {
        arrayCarMarkerData: [],
        arrayCLCMarkerData: [],
        arrayCLCPolygonData: [],
        arraySmallMarkerData: [],
        arrayLargeMarkerData: [],
        arrayVillageMarkerData: []
      },
      // warningNum: 0,
      // 筛选数据
      screeningData: [],
      hideFooter: false,
      showLegend: true,

      mapInfoTabs: [{
        icon: 'el-icon-user'
      }, {
        icon: 'el-icon-truck'
      }, {
        icon: 'el-icon-coin'
      }, {
        icon: 'el-icon-document'
      }, {
        icon: 'el-icon-bangzhu'
      }],
      mapInfoTabValue: 0,
      showMapInfo: true,
      peopleData: [{
        role: '项目经理',
        total: 18,
        attendance: 10,
        noAttendance: 8
      }, {
        role: '项目经理',
        total: 18,
        attendance: 10,
        noAttendance: 8
      }, {
        role: '项目经理',
        total: 18,
        attendance: 10,
        noAttendance: 8
      }, {
        role: '项目经理',
        total: 18,
        attendance: 10,
        noAttendance: 8
      }, {
        role: '项目经理',
        total: 18,
        attendance: 10,
        noAttendance: 8
      }],
      iconInfos: [{
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 10
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 10
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 10
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }, {
        icon: 'el-icon-delete',
        name: '垃圾收集点',
        num: 0
      }],
      pieOptions: {
        type: 'pie',
        showValue: false,
        legend: {
          position: 'right',
          bottom: 40
        },
        radius: 50,
        bgColor: 'rgba(0,0,0,0)',
        labels: ['道路', '绿地'],
        datasets: [
          {
            data: [500, 200]
          }
        ]
      },
      eventData: [{
        name: '监管考核',
        percent: 30,
        num: 17
      }, {
        name: '监管考核',
        percent: 40,
        num: 23
      }, {
        name: '监管考核',
        percent: 55,
        num: 31
      }, {
        name: '监管考核',
        percent: 0,
        num: 0
      }, {
        name: '监管考核',
        percent: 0,
        num: 0
      }],
      mapOperationsList: [{
        name: '车辆',
        icon: 'el-icon-truck',
        active: true
      }, {
        name: '大中型餐饮单位',
        icon: 'el-icon-knife-fork',
        active: false
      }, {
        name: '沿街小型商铺',
        icon: 'el-icon-tableware',
        active: false
      }, {
        name: '小区厨余垃圾点',
        icon: 'el-icon-refrigerator',
        active: false
      }],
      // operationValue: '',

      checkbox_large: false,
      checkbox_small: false,
      checkbox_village: false,
      checkbox_carLabel: true,
    }
  },
  created () {
    // 在线离线人数
    eventBus.$on('mapData1', val => {
      this.status = val
    })
    // 报警数量
    // eventBus.$on('warningNum', val => {
    //   this.warningNum = val
    // })
    // 隐藏底部列表
    eventBus.$on('toHideFooter', () => {
      this.hideFooter = true;
    })
    // 隐藏左侧面板
    eventBus.$on('toHideMapInfo', () => {
      this.showMapInfo = false;
      this.mapInfoTabValue = '';
    })
    // 隐藏图例
    eventBus.$on('toHideLegend', () => {
      this.showLegend = false;
    })
  },
  mounted () {
    // this.getXY()
    // 显示地图
    this.mapShow()
    // 双击人员列表某一行，显示标记点，信息窗体
    eventBus.$on('mapLocaltion', val => {
      this.dbClick(val)
    })
    // 双击报警列表某一行
    eventBus.$on('warningItem', val => {
      this.dbClickWarning(val)
    })
    // 传输处理三大类点位数据
    eventBus.$on('mapPlacePoint', val => {
      val.forEach(element => {
        if (element.CLIENT_NO.indexOf(localStorage.getItem('CLIENT_NO')) != -1) {
          switch (element.TYPE) {
            case '1':
              this.Data.arrayVillageMarkerData.push(element)
              break;
            case '2':
              this.Data.arraySmallMarkerData.push(element)
              break;
            case '3':
              this.Data.arrayLargeMarkerData.push(element)
              break;
            default:
              break;
          }
        }
      });
    })
    // 传输处理厂区域数据
    eventBus.$on('mapCLCPolygon', val => {
      this.Data.arrayCLCPolygonData = val
      // 创建多边形
      this.handleCheckCLC()
    })
    // // 清扫队区域
    // eventBus.$on('showClearArea', message => {
    //   // 创建多边形
    //   this.getClearArea(message)
    // })
    // // 清除区域
    // eventBus.$on('clearArea', () => {
    //   this.map.clearOverlays()
    // })
    // // 开始跟踪
    // eventBus.$on('Tracking', val => {
    //   this.dbClick(val)
    // })
    // 自动刷新 + 显示人员标记点
    eventBus.$on('mapData2', val => {
      this.screeningData = val
      this.showPoint()
    })
    //地图上显示垃圾点位
    // eventBus.$on('mapCLCPolygon', val => {
    //   // val.forEach(item => {
    //     this.createMarker_Box(val)
    //   // })
    // })
    const _this = this
    this.map.addEventListener('zoomend', function (e, target) {
      _this.mapZoom = e.target.getZoom()
      console.log(_this.mapZoom)
      // // 添加姓名标注和删除姓名标注
      // if (e.target.Va > 12) {
      //   _this.screeningData.forEach(item => {
      //     const point = new BMap.Point(item.LONGITUDE, item.LATITUDE)
      //     const opts = {
      //       position: point,    // 指定文本标注所在的地理位置
      //       offset: new BMap.Size(15, -20)    //设置文本偏移量
      //     }
      //     const label = new BMap.Label(item.NAME, opts)  // 创建文本标注对象
      //     label.setStyle({
      //       color: 'red',
      //       fontSize: '12px',
      //       fontWeight: '700',
      //       height: '20px',
      //       lineHeight: '20px',
      //       fontFamily: '微软雅黑'
      //     })
      //     _this.map.addOverlay(label)
      //   })
      // } else {
      //   const allOverlay = _this.map.getOverlays()
      //   for (let i = 0; i < allOverlay.length; i++) {
      //     if (allOverlay[i].toString() == "[object Label]") {
      //       _this.map.removeOverlay(allOverlay[i])
      //     }
      //   }
      // }
    })
  },
  methods: {
    // 显示地图
    async mapShow () {
      // 百度地图API功能
      this.map = new BMap.Map('map')// 创建Map实例
      // this.map.setCurrentCity(MapStr.MapName)
      this.map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
      // 添加缩放控件
      // const top_left_navigation = new BMap.NavigationControl()
      // this.map.addControl(top_left_navigation)
      //添加地图类型控件
      // this.map.addControl(new BMap.MapTypeControl({
      //   mapTypes: [
      //     BMAP_NORMAL_MAP,
      //     BMAP_HYBRID_MAP
      //   ]
      // }))
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMap.Point(MapStr.DefaultPointX, MapStr.DefaultPointY), this.mapZoom)
    },
    // 显示标记点
    async showPoint () {
      const _self = this;
      this.map.clearOverlays()
      this.screeningData.forEach(item => {
        var marker = ''
        if (item.POINTTYPE === '大中型餐饮单位') {
          marker = this.createMarker(item.LONGITUDE, item.LATITUDE, imageMarkerCarL)
        }
        if (item.POINTTYPE === '小区') {
          marker = this.createMarker(item.LONGITUDE, item.LATITUDE, imageMarkerCarV)
        }
        if (item.POINTTYPE === '沿街小型商铺') {
          marker = this.createMarker(item.LONGITUDE, item.LATITUDE, imageMarkerCarS)
        }
        if (this.mapOperationsList[0].active) {
          var label = new BMap.Label(item.LICENSE_PLATE, { offset: new BMap.Size(0, 52) })
          marker.setLabel(label)
        }
        // 信息窗体
        const opts = {
          width: 200,     // 信息窗口宽度
          height: 110,     // 信息窗口高度
          title: '车辆信息', // 信息窗口标题
        }
        const str = `<p style="margin-bottom: 5px;">车辆名称：${item.LICENSE_PLATE}</p>
        <p style="margin-bottom: 5px;">分组：${item.CLIENT_NAME}</p>
                    <p style="margin-bottom: 5px;">车辆类型：${item.CAR_TYPE}</p>
                    <p style="margin-bottom: 5px;">垃圾来源：${item.POINTTYPE}</p>
                    `
        const infoWindow = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象 
        marker.addEventListener("click", function () {
          this.openInfoWindow(infoWindow);
        });

        // 右击显示菜单
        // 这种方法不能点击链接
        // const rightOpts = {
        //   width: 100,     // 信息窗口宽度
        //   height: 50,     // 信息窗口高度
        //   title: '操作', // 信息窗口标题
        // }
        // const rightStr = `<div class="row_box">
        //   <span @click="showCCTV()">视频监控</span>
        // </div>`
        // const rightInfoWindow = new BMap.InfoWindow(rightStr, rightOpts)  // 创建信息窗口对象 
        // 这一步是为了阻止右击时系统默认的弹出框
        marker.addEventListener("oncontextmenu", function (e) {
          e.preventDefault();
        });
        // 右击事件
        marker.addEventListener("onmouseup", function (oEvent) {
          if (!oEvent) oEvent = window.event;
          if (oEvent.domEvent.button == 2) {
            // this.openInfoWindow(rightInfoWindow);
            window.event.returnValue = false
            _self.MouseEvent.left = oEvent.clientX
            _self.MouseEvent.top = oEvent.clientY - 26 * 2
            _self.MouseEvent.isShow = true
          }
        });
      })
    },
    // 跳转至多辆车视频页面
    goMoreCarVideo () {
      // 暂时写死车牌号
      const LICENSE_PLATE = '津C95726';
      this.MouseEvent.isShow = false;
      this.$router.push({
        path: '/moreCarVideo',
        query: {
          LICENSE_PLATE
        }
      });
    },
    // 创建标记点
    createMarker (lng, lat, iconURL) {
      const pt = new BMap.Point(lng, lat)
      const myIcon = new BMap.Icon(iconURL, new BMap.Size(65, 65))
      const marker = new BMap.Marker(pt, { icon: myIcon })// 创建标注
      this.map.addOverlay(marker)// 将标注添加到地图中
      return marker
    },
    // 双击人员列表
    dbClick (val) {
      // 标记点地图居中
      this.map.centerAndZoom(new BMap.Point(val.LONGITUDE, val.LATITUDE), this.mapZoom)
      // 信息窗体
      const opts = {
        width: 200,     // 信息窗口宽度
        height: 110,     // 信息窗口高度
        title: '车辆信息', // 信息窗口标题
      }
      const str = `<p style="margin-top: 5px;margin-bottom: 5px;">车辆名称：${val.LICENSE_PLATE}</p>
      <p style="margin-bottom: 5px;">分组：${val.CLIENT_NAME}</p>
      <p style="margin-bottom: 5px;">车辆类型：${val.CAR_TYPE}</p>
      <p style="margin-bottom: 5px;">垃圾来源：${val.POINTTYPE}</p>
      `
      const infoWindow = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象 
      const point = new BMap.Point(val.LONGITUDE, val.LATITUDE)//信息窗体坐标
      this.map.openInfoWindow(infoWindow, point) //开启信息窗口
    },
    // 双击报警列表
    dbClickWarning (val) {
      if (this.MapOverlay.warningMarker != '') {
        this.MapOverlay.warningMarker.enableMassClear()
        this.map.removeOverlay(this.MapOverlay.warningMarker)
      }
      this.map.centerAndZoom(new BMap.Point(val.LONGITUDE, val.LATITUDE), this.mapZoom)
      const pt = new BMap.Point(val.LONGITUDE, val.LATITUDE)
      const myIcon = new BMap.Icon(warningMark, new BMap.Size(32, 32))
      const marker = new BMap.Marker(pt, { icon: myIcon })// 创建标注
      marker.disableMassClear()
      this.map.addOverlay(marker)


      // 信息窗体
      const opts = {
        width: 230,     // 信息窗口宽度
        height: 130,     // 信息窗口高度
        title: '报警信息' // 信息窗口标题
      }
      var str = `<p style="margin-top: 8px;margin-bottom: 8px;">车辆：${val.LICENSE_PLATE}</p>
      <p style="margin-bottom: 8px;">报警类型：${val.TYPE}</p>
      <p style="margin-bottom: 8px;">报警时间：${val.ALARMTIME}</p>
      <p style="margin-bottom: 8px;">报警位置：${val.ALARM_LOCATION}</p>`

      // if (val.TYPE === '转运起点报警'){
      // }
      if (val.TYPE === '转运终点报警') {
        str += `<p style="margin-bottom: 8px;">终点报警转运点位数：${val.ALARM_POINTSNUM}</p>`
        opts["height"] = 160
      }
      if (val.TYPE === '区域报警') {
        str += `<p style="margin-bottom: 8px;">车辆所属区域：${val.REGION}</p>
        <p style="margin-bottom: 8px;">违规转运区域：${val.VIOLATIONREGION}</p>`
        opts["height"] = 180
      }
      if (val.TYPE === '来源单位报警') {
        str += `<p style="margin-bottom: 8px;">车辆来源单位：${val.COMPANY}</p>
        <p style="margin-bottom: 8px;">违规来源单位：${val.VIOLATION_COMPANY}</p>`
        opts["height"] = 180
      }
      if (val.TYPE === '超速报警') {
        str += `<p style="margin-bottom: 8px;">违规速度：${val.ViolationSpeed}</p>`
        opts["height"] = 180
      }

      const infoWindow = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象 
      // infoWindow.disableCloseOnClick()
      const point = new BMap.Point(val.LONGITUDE, val.LATITUDE)//信息窗体坐标
      marker.addEventListener("click", function () {
        marker.openInfoWindow(infoWindow, point)
      })
      marker.openInfoWindow(infoWindow, point) //开启信息窗口

      this.MapOverlay.warningMarker = marker
      const _this = this
      infoWindow.addEventListener("clickclose", function () {
        marker.enableMassClear()
        _this.map.removeOverlay(marker)
      })
    },
    handleCheckZZZ () {
      if (document.getElementById('checkbox_zzz').checked) {
        var bounds = this.map.getBounds()
        var sw = bounds.getSouthWest()
        var ne = bounds.getNorthEast()
        var lngSpan = Math.abs(sw.lng - ne.lng)
        var latSpan = Math.abs(ne.lat - sw.lat)
        for (var j = 0; j < 6; j++) {
          var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
          var markerImage = new BMap.Icon(imgMarkerZZZ, new BMap.Size(50, 50))
          var marker = new BMap.Marker(point, { icon: markerImage })
          marker.disableMassClear()
          this.map.addOverlay(marker)
          this.MapOverlay.arrayZZZMapOverlay.push(marker)
        }
      } else {
        for (var i = 0; i < this.MapOverlay.arrayZZZMapOverlay.length; i++) {
          this.MapOverlay.arrayZZZMapOverlay[i].enableMassClear()
          this.map.removeOverlay(this.MapOverlay.arrayZZZMapOverlay[i])
        }
        this.MapOverlay.arrayZZZMapOverlay = []
      }
    },
    async handleCheckLarge () {
      console.log(this.Data.arrayLargeMarkerData)
      if (this.mapOperationsList[1].active) {
        this.Data.arrayLargeMarkerData.forEach(element => {
          // {"ID":1,"NAME":"1984生活广场","PARENT_NO":"0000019","PARENT_NAME":null,"CLIENT_NO":"000001900","CLIENT_NAME":"塘沽","TYPE":3,"LONGITUDE":117.706085,"LATITUDE":39.02312,"UPDATE_TIME":"2020-12-23T17:14:21.78"}
          var point = new BMap.Point(element.LONGITUDE, element.LATITUDE)
          var markerImage = new BMap.Icon(imgMarkerLarge, new BMap.Size(50, 50))
          var marker = new BMap.Marker(point, { icon: markerImage })
          var label = new BMap.Label(element.NAME, { offset: new BMap.Size(-10, 50) })
          marker.setLabel(label)
          marker.disableMassClear()
          this.map.addOverlay(marker)
          this.MapOverlay.arrayLargeMapOverlay.push(marker)
        });
      } else {
        for (var i = 0; i < this.MapOverlay.arrayLargeMapOverlay.length; i++) {
          this.MapOverlay.arrayLargeMapOverlay[i].enableMassClear()
          this.map.removeOverlay(this.MapOverlay.arrayLargeMapOverlay[i])
        }
        this.MapOverlay.arrayLargeMapOverlay = []
      }
    },
    handleCheckSmall () {
      if (this.mapOperationsList[2].active) {
        this.Data.arraySmallMarkerData.forEach(element => {
          // {"ID":1,"NAME":"1984生活广场","PARENT_NO":"0000019","PARENT_NAME":null,"CLIENT_NO":"000001900","CLIENT_NAME":"塘沽","TYPE":3,"LONGITUDE":117.706085,"LATITUDE":39.02312,"UPDATE_TIME":"2020-12-23T17:14:21.78"}
          var point = new BMap.Point(element.LONGITUDE, element.LATITUDE)
          var markerImage = new BMap.Icon(imgMarkerSmall, new BMap.Size(50, 50))
          var marker = new BMap.Marker(point, { icon: markerImage })
          var label = new BMap.Label(element.NAME, { offset: new BMap.Size(-10, 50) })
          marker.setLabel(label)
          marker.disableMassClear()
          this.map.addOverlay(marker)
          this.MapOverlay.arraySmallMapOverlay.push(marker)
        });
      } else {
        for (var i = 0; i < this.MapOverlay.arraySmallMapOverlay.length; i++) {
          this.MapOverlay.arraySmallMapOverlay[i].enableMassClear()
          this.map.removeOverlay(this.MapOverlay.arraySmallMapOverlay[i])
        }
        this.MapOverlay.arraySmallMapOverlay = []
      }
    },
    //小区
    handleCheckVillage () {
      if (this.mapOperationsList[3].active) {
        this.Data.arrayVillageMarkerData.forEach(element => {
          // {"ID":1,"NAME":"1984生活广场","PARENT_NO":"0000019","PARENT_NAME":null,"CLIENT_NO":"000001900","CLIENT_NAME":"塘沽","TYPE":3,"LONGITUDE":117.706085,"LATITUDE":39.02312,"UPDATE_TIME":"2020-12-23T17:14:21.78"}
          var point = new BMap.Point(element.LONGITUDE, element.LATITUDE)
          var markerImage = new BMap.Icon(imgMarkerVillage, new BMap.Size(50, 50))
          var marker = new BMap.Marker(point, { icon: markerImage })
          var label = new BMap.Label(element.NAME, { offset: new BMap.Size(-10, 50) })
          marker.setLabel(label)
          marker.disableMassClear()
          this.map.addOverlay(marker)
          this.MapOverlay.arrayVillageMapOverlay.push(marker)
        });
      } else {
        for (var i = 0; i < this.MapOverlay.arrayVillageMapOverlay.length; i++) {
          this.MapOverlay.arrayVillageMapOverlay[i].enableMassClear()
          this.map.removeOverlay(this.MapOverlay.arrayVillageMapOverlay[i])
        }
        this.MapOverlay.arrayVillageMapOverlay = []
      }
    },
    handleCheckCLC () {
      // if (document.getElementById('checkbox_clc').checked) {
      var pointPolygon = []
      this.Data.arrayCLCPolygonData.forEach(item => {
        var point = new BMap.Point(item.LONGITUDE, item.LATITUDE)
        pointPolygon.push(point)
      })
      // var polygon = new BMap.Polygon([new BMap.Point(117.425438, 38.872788), new BMap.Point(117.426718, 38.873610), new BMap.Point(117.427381, 38.872967), new BMap.Point(117.426111, 38.872155), new BMap.Point(117.425438, 38.872788)], { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 })
      var polygon = new BMap.Polygon(pointPolygon)
      polygon.disableMassClear()
      this.map.addOverlay(polygon)
      this.MapOverlay.arrayCLCMapOverlay.push(polygon)
      var polygonCenter = polygon.getBounds().getCenter()
      var markerImage = new BMap.Icon(imgMarkerCLC, new BMap.Size(50, 50))
      var marker = new BMap.Marker(polygonCenter, { icon: markerImage })
      marker.disableMassClear()
      var label = new BMap.Label('滨海新区碧海环保垃圾处理厂', { offset: new BMap.Size(-10, 50) })
      marker.setLabel(label)
      this.map.addOverlay(marker)
      this.MapOverlay.arrayCLCMapOverlay.push(marker)
      // this.map.centerAndZoom(polygonCenter, this.mapZoom)
      // } else {
      //   this.MapOverlay.arrayCLCMapOverlay.forEach(item => {
      //     item.enableMassClear()
      //     this.map.removeOverlay(item)
      //   })
      //   this.MapOverlay.arrayCLCMapOverlay = []
      // }
    },
    // 显示底部列表
    showFooter () {
      this.hideFooter = false;
      eventBus.$emit('toShowFooter');
    },
    // 地图信息tab切换
    changeMapInfoTabValue (index) {
      if ((index === this.mapInfoTabValue) && this.showMapInfo) {
        this.showMapInfo = false;
        this.mapInfoTabValue = '';
      } else {
        this.showMapInfo = true;
        this.mapInfoTabValue = index;
      }
    },
    // 改变右上方显示隐藏图标
    changeOperationValue (item, index) {

      item.active = !item.active

      switch (index) {
        case 0:
          this.showPoint()
          break;
        case 1:
          this.handleCheckLarge()
          break;
        case 2:
          this.handleCheckSmall()
          break;
        case 3:
          this.handleCheckVillage()
          break;
        default:
          break;
      }
    }
  }
}
</script>

<style scoped lang="less">
#allmap {
  position: relative;
  height: calc(100% - 40px);
  // height: 100%;
}
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
#map {
  height: 100%;
}
.person_top {
  width: 150px;
  height: 130px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: #b2dfee;
  border: 1px solid #ccc;
  p {
    height: 30px;
    // text-align: center;
    padding-left: 5px;
    padding-left: 10px;
    color: #333;
    span:first-child {
      text-align: center;
      padding-top: 14px;
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
      img {
        // background-size: 30px 30px;
        height: 30px;
      }
    }
  }
}
.person_legend {
  width: 420px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 25%;
    margin-bottom: 8px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 30px;
        }
      }
    }
  }
}
.status_legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0 10px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  .public {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    margin-right: 2px;
  }
  .online {
    background-color: #1afa29;
  }
  .outline {
    background-color: blue;
  }
  .warning {
    background-color: red;
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #007acc;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.map-infos-wrap {
  position: absolute;
  left: 10px;
  top: 10px;
  height: calc(100% - 40px);
  .map-infos {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 300px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
    h3 {
      font-size: 14px;
      line-height: 26px;
      i {
        float: right;
        font-style: normal;
        color: #666;
        font-size: 12px;
      }
    }
    .item-wrap {
      display: flex;
      margin-bottom: 20px;
      .item-con {
        flex: 1;
        text-align: center;
        h2 {
          margin-top: 10px;
          line-height: 30px;
          font-size: 20px;
        }
        span {
          font-size: 12px;
          color: #666;
        }
      }
    }
    .icon-wrap {
      margin: 10px 10px 10px 0;
      .icon-con {
        width: 33.33%;
        float: left;
        text-align: center;
        margin: 15px 0;
        position: relative;
        i {
          font-size: 20px;
          display: block;
          margin-bottom: 5px;
          color: #333;
        }
        .el-tag.el-tag--mini {
          position: absolute;
          right: 0;
          top: -8px;
          height: 15px;
          line-height: 15px;
          border-color: #e1dada;
          background: #e1dada;
          color: #666;
        }
        span {
          font-size: 12px;
          color: #666;
        }
        &.hasColor {
          i {
            color: #007acc;
          }
          .el-tag.el-tag--mini {
            border-color: #007acc;
            background: #007acc;
            color: #fff;
          }
        }
      }
    }
    .map-checkboxs {
      margin-top: 10px;
      p {
        line-height: 30px;
      }
    }
    /deep/.el-progress-bar__outer {
      background: #d8d8d8;
    }
  }
  .info-tabs {
    position: absolute;
    right: -30px;
    top: 50px;
    background: rgba(255, 255, 255, 0.9);
    width: 30px;
    border-radius: 0 3px 3px 0;
    overflow: hidden;
    a {
      display: block;
      padding: 3px 3px 1px 3px;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
      &.active {
        background: #007acc;
        i {
          color: #fff;
        }
      }
    }
  }
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 6px;
  }
}
/deep/.el-table.card-table {
  margin-top: 10px;
  background: none;
  thead,
  tbody {
    color: #333;
  }
  tr,
  th {
    background: none !important;
  }
  th div,
  td div {
    font-size: 14px;
  }
  tr:nth-child(2n) {
    background: none;
  }
  tr:hover > td {
    background: none !important;
  }
}
.map-operation {
  position: absolute;
  right: 20%;
  top: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #666;
      font-size: 14px;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      i {
        margin-right: 3px;
        font-size: 14px;
        &:before {
          font-size: inherit;
          color: inherit;
        }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      &:last-child {
        &::before {
          display: none;
        }
      }
      &.active {
        color: #007acc;
      }
    }
  }
}
.row_box {
  width: 120px;
  // height: 130px;
  color: #666;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: fixed;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
</style>
